import { SliderField } from '@aws-amplify/ui-react';

import { SliderFieldDemo } from './demo';
import {
  DefaultSliderFieldExample,
  ControlledSliderFieldExample,
  SliderFieldBasicsExample,
  SliderFieldFormatValueExample,
  SliderFieldOrientationExample,
  SliderFieldAriaExample,
  SliderFieldIconsExample,
  SliderFieldAccessibilityExample,
  SliderFieldFormExample,
  SliderFieldValidationExample,
  SliderFieldThemeExample,
  SliderFieldStylePropsExample,
} from './examples';

import { Example, ExampleCode } from '@/components/Example';
import { Fragment } from '@/components/Fragment';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';

## Demo

<SliderFieldDemo />

## Usage

Import the SliderField component.

<Example>
  <DefaultSliderFieldExample />
  <ExampleCode>
```jsx file=./examples/DefaultSliderFieldExample.tsx

````
  </ExampleCode>
</Example>

### Controlled component

To use the SliderField as a controlled component, handle the current value using the `value` and `onChange` props.

<Example>
  <ControlledSliderFieldExample />
  <ExampleCode>
```jsx file=./examples/ControlledSliderFieldExample.tsx

````

  </ExampleCode>
</Example>

### Basics

To control the range of the SliderField, use the `min` and `max` props. To control the interval between selectable values, use the `step` prop (defaults to 1). You may also set a `defaultValue`.

<Example>
  <SliderFieldBasicsExample />
  <ExampleCode>
```jsx file=./examples/SliderFieldBasicsExample.tsx

````

  </ExampleCode>
</Example>

### Accessibility / Label behavior

<Fragment>{() => import('./../shared/formFieldAccessibility.mdx')}</Fragment>

You can hide the value to the right of the label with `isValueHidden` prop.

<Example>
  <SliderFieldAccessibilityExample />
  <ExampleCode>
```jsx file=./examples/SliderFieldAccessibilityExample.tsx

````

  </ExampleCode>
</Example>

The SliderField will programmatically update the value of `aria-valuenow` in response to user input. However, a slider sometimes is used to choose a value that is not, semantically, a number. In these cases, the `ariaValuetext` attribute is used to provide the appropriate text name for the currently selected value. See [MDN using the slider role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/slider_role).

<Example>
  <SliderFieldAriaExample />
  <ExampleCode>
```jsx file=./examples/SliderFieldAriaExample.tsx

````

  </ExampleCode>
</Example>

### Forms

To use the SliderField in a form, pass a `name` prop to the SliderField to access its current value. To disable the SliderField, set the `isDisabled` prop. A disabled SliderField will not be focusable, mutable, or submit a value with form data.

<Example>
  <SliderFieldFormExample />
  <ExampleCode>
```jsx file=./examples/SliderFieldFormExample.tsx

````

  </ExampleCode>
</Example>

### Orientation

To change the orientation from horizontal (default) to vertical, use the `orientation` prop.

<Example>
  <SliderFieldOrientationExample />
  <ExampleCode>
```jsx file=./examples/SliderFieldOrientationExample.tsx

````

  </ExampleCode>
</Example>

### Icons

To add icons on either side of the SliderField, you may use the `outerStartComponent` or `outerEndComponent` props.

<Example>
  <SliderFieldIconsExample />
  <ExampleCode>
```jsx file=./examples/SliderFieldIconsExample.tsx

````

  </ExampleCode>
</Example>

### Format value
To format how the `value` is displayed, you can pass in a render function to `formatValue` prop.

<Example>
  <SliderFieldFormatValueExample />
  <ExampleCode>
  ```jsx file=./examples/SliderFieldFormatValueExample.tsx

  ```

  </ExampleCode>
</Example>

### Validation error

To validate the SliderField input, use the `hasError` and `errorMessage` props.

<Example>
  <SliderFieldValidationExample />
  <ExampleCode>
```jsx file=./examples/SliderFieldValidationExample.tsx

````

  </ExampleCode>
</Example>

## CSS Styling

<ThemeExample component="SliderField">
  <Example>
    <SliderFieldThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/SliderFieldThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="SliderField" />

### Global styling

To override styling on all SliderField components, you can set the Amplify CSS variables or use the target classes.

<Example>
  <SliderField
    className="global-styling-slider"
    label="Globally Styled Slider"
    defaultValue={50}
  />
</Example>

```css
/* styles.css */
.amplify-sliderfield {
  --amplify-components-sliderfield-range-background-color: var(
    --amplify-colors-orange-60
  );
}
```

### Local styling

To override styling on a specific SliderField, you can use class selectors or style props.

_Using a class selector:_

Note that `.amplify-sliderfield__range` applies to the filled-in portion of the SliderField track, and `.amplify-sliderfield__track` applies to the empty portion.

<Example>
  <SliderField
    className="custom-slider"
    label="Classname Slider"
    defaultValue={50}
  />
</Example>

```css
/* styles.css */
.custom-slider .amplify-sliderfield__track {
  background-color: var(--amplify-colors-purple-80);
}
```

```jsx
import { SliderField } from '@aws-amplify/ui-react';
import './styles.css';

<SliderField
  className="custom-slider"
  label="Classname Slider"
  defaultValue={50}
/>;
```

_Using style props:_

There are several props you can use to style different parts of the SliderField:

- `filledTrackColor` applies to the filled-in part of the SliderField
- `emptyTrackColor` applies to the empty part of the SliderField
- `thumbColor` applies to the thumb component that users can slide
- `trackSize` applies to the width of the track itself (e.g., 15px)
- `size` applies to the overall size of the SliderField, including the thumb (options include `'small'`, `'large'`, and default)

<Example>
  <SliderFieldStylePropsExample />
  <ExampleCode>
```jsx file=./examples/SliderFieldStylePropsExample.tsx

```

  </ExampleCode>
</Example>